<!-- 订单管理 -->
<template>
  <div class="dashboard-container order-list customer-list-box">

    <el-card class="card">
      <el-form
        ref="form"
        :inline="true"
        :model="orderForm"
      >
        <!-- 第一行 -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="订单编号：">
              <el-input
                v-model="orderForm.id"
                placeholder="请输入订单编号"
                style="width:300px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单状态：">
              <el-select
                v-model="orderForm.status"
                placeholder="请选择"
                style="width:300px"
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="付费状态：">
              <el-select
                v-model="orderForm.paymentStatus"
                placeholder="请选择"
                style="width:300px"
              >
                <el-option
                  v-for="item in paymentStatusList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="发件人姓名：">
              <el-input
                v-model="orderForm.senderName"
                placeholder="请输入发件人姓名"
                style="width:285px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发件人电话：">
              <el-input
                v-model="orderForm.senderPhone"
                placeholder="请输入发件人电话"
                style="width:285px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col
            :span="8"
          >
            <el-form-item label="发件人地址：">
              <el-select
                v-model="orderForm.senderProvinceId"
                placeholder="请选择"
                style="width:80px"
                @change="provinceChange"
              >
                <el-option
                  v-for="item in provinceList"
                  :key="item.value"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="orderForm.senderCityId"
                collapse-tags
                style="margin-left: 20px;width:80px"
                placeholder="请选择"
                @change="cityChange"
              >
                <el-option
                  v-for="item in cityList"
                  :key="item.value"
                  :label="item"
                  :value="item"
                >
                </el-option></el-select>
              <el-select
                v-model="orderForm.senderCountyId"

                collapse-tags
                style="margin-left: 20px;width:80px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in areaList"
                  :key="item.value"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="收件人姓名：">
              <el-input
                v-model="orderForm.receiverName"
                placeholder="请输入收件人姓名"
                style="width:285px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收件人电话：">
              <el-input
                v-model="orderForm.receiverPhone"
                placeholder="请输入收件人电话"
                style="width:285px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col
            :span="8"
          >
            <el-form-item label="收件人地址：">
              <el-select
                v-model="orderForm.receiverProvinceId"
                placeholder="请选择"
                style="width:80px"
                @change="provinceChange2"
              >
                <el-option
                  v-for="item in provinceList2"
                  :key="item.value"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="orderForm.receiverCityId"
                collapse-tags
                style="margin-left: 20px;width:80px"
                placeholder="请选择"
                @change="cityChange2"
              >
                <el-option
                  v-for="item in cityList2"
                  :key="item.value"
                  :label="item"
                  :value="item"
                >
                </el-option></el-select>
              <el-select
                v-model="orderForm.receiverCountyId"
                collapse-tags
                style="margin-left: 20px;width:80px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in areaList2"
                  :key="item.value"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第四行 -->
        <el-button
          size="medium"
          class="btnRedcolor"
          @click="submit"
        >搜索</el-button>
        <el-button
          size="medium"
          @click="clear"
        >重置</el-button>
      </el-form>
    </el-card>
    <el-card class="card">
      <!-- 表单 -->
      <template>
        <el-table
          :data="list"
        >
          <el-table-column
            prop="amount"
            label="序号"
          >
            <template v-slot="row">
              <span>
                {{ row.$index+1 }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="id"
            label="订单编号"
            width="180px"
          > </el-table-column>
          <el-table-column
            prop="memberId"
            label="运单编号"
            width="180px"
          > </el-table-column>
          <el-table-column
            prop="createTime"
            label="下单时间"
            width="180px"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            label="订单状态"
          >
            <template v-slot="{ row }">
              <span v-if="row.status===23000">代取件</span>
              <span v-else-if="row.status===23001">已取件</span>
              <span v-else-if="row.status===23002">网点自寄</span>
              <span v-else-if="row.status===23003">网点入库</span>
              <span v-else>拒收</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="senderName"
            label="发件人姓名"
            width="90px"
          >
          </el-table-column>
          <el-table-column
            prop="senderPhone"
            label="发件人电话"
            width="100px"
          >
          </el-table-column>
          <el-table-column
            prop="senderAddress"
            label="发件人地址"
            width="90px"
          > </el-table-column>
          <el-table-column
            prop="receiverName"
            label="收件人姓名"
            width="90px"
          > </el-table-column>
          <el-table-column
            prop="receiverPhone"
            label="收件人电话"
            width="120px"
          > </el-table-column>
          <el-table-column
            prop="receiverAddress"
            label="收件人地址"
            width="90px"
          > </el-table-column>
          <el-table-column
            prop="pickupType"
            label="取件类型"
          >
            <template v-slot="{ row }">
              <span v-if="row.pickupType===1">网点自寄</span>
              <span v-else>上门取件</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="paymentMethod"
            label="付费类型"
          >
            <template v-slot="{ row }">
              <span v-if="row.paymentMethod===1">预结</span>
              <span v-else>到付</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="paymentStatus"
            label="付费状态"
          >
            <template v-slot="{ row }">
              <span v-if="row.paymentStatus===1">未付</span>
              <span v-else>已付</span>
            </template>
          </el-table-column>

          <!-- 操作按钮 -->
          <el-table-column
            fixed="right"
            label="操作"
            width="120"
          >
            <template v-slot="{row}">
              <el-button
                type="text"
                size="small"
                @click="$router.push(`edit-order/?id=${row.id}`)"
              >
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页器 -->
      <el-card style="margin-bottom:80px">
        <el-pagination
          :page-sizes="[10, 20, 50, 100]"
          :page-size="orderForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
          style="text-align:center; margin: 15px;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-card>
    </el-card>
  </div>
</template>
<script>
import { province, city, area } from '@/api/senderAdd'
import { orderList } from '@/api/order'
export default {
  data() {
    return {
      // 1.定义空数组接收下面this.query返回的数据
      list: [],
      counts: 0,
      pname: '',
      provinceList: [],
      cityList: [],
      areaList: [],
      provinceList2: [],
      cityList2: [],
      areaList2: [],
      pname2: '',
      paymentStatusList: [
        {
          'id': 1,
          'name': '未付'
        },
        {
          'id': 2,
          'name': '已付'
        }
      ],
      statusList: [
        {
          'id': 23000,
          'name': '待取件'
        },
        {
          'id': 23001,
          'name': '已取件'
        },
        {
          'id': 23005,
          'name': '运输中'
        },
        {
          'id': 23008,
          'name': '派送中'
        },
        {
          'id': 23009,
          'name': '已签收'
        },
        {
          'id': 23010,
          'name': '拒收'
        },
        {
          'id': 230011,
          'name': '已取消'
        },
        {
          'id': 0,
          'name': '全部'
        }
      ],
      // orderForm对象中放接口得参数名称
      orderForm: {
        // 页码
        page: 1,
        // 页尺寸
        pageSize: 10,
        // 订单编号
        id: null,
        // 订单状态
        status: '',
        // 付费状态
        paymentStatus: '',
        // 发件人名字
        senderName: '',
        // 发件人电话
        senderPhone: '',
        // 发件人省
        senderProvinceId: '',
        // 发件人市
        senderCityId: '',
        // 发件人区
        senderCountyId: '',
        // 收件人名字
        receiverName: '',
        // 收件人电话
        receiverPhone: '',
        // 收件人省
        receiverProvinceId: '',
        // 收件人市
        receiverCityId: '',
        // 收件人区
        receiverCountyId: '',
        pages: [],
        // 取件类型
        pickupType: ''
      }
    }
  },
  created() {
    this.orderList()
    this.province()
    this.province2()
  },
  methods: {
    async orderList() {
      // res接收并传到list:[]
      const res = await orderList(this.orderForm)
      console.log(res)
      // 调出来的接口数据，赋值给新list
      this.list = res.data.items
      this.counts = +res.data.counts
      console.log(this.counts)
    },
    async province() {
      const { data } = await province()
      console.log('data数据数据数据', data)
      this.provinceList = data.list
    },
    async provinceChange(value) {
      this.pname = value
      console.log(value)
      const data = await city({ pname: value })
      console.log('城市数据', data)
      this.cityList = data.data.list
    },
    async cityChange(value) {
      console.log(value)
      const data = await area({ pname: this.pname, cname: value })
      console.log('区县数据', data)
      this.areaList = data.data.list
    },
    // 第二个城市渲染
    async province2() {
      const { data } = await province()
      this.provinceList2 = data.list
    },
    async provinceChange2(value) {
      this.pname2 = value
      console.log(value)
      const data = await city({ pname: value })
      console.log(data)
      this.cityList2 = data.data.list
    },
    async cityChange2(value) {
      console.log(value)
      const data = await area({ pname: this.pname2, cname: value })
      console.log(data)
      this.areaList2 = data.data.list
    },
    // 每页显示页码数发生变化
    handleSizeChange (value) {
      this.orderForm.pageSize = value
      this.orderList()
    },
    // 当前页发生变化
    handleCurrentChange (value) {
      this.orderForm.page = value
      this.orderList()
    },
    // 搜索
    async submit() {
      const res = await orderList(this.orderForm)
      console.log(res)
      // 调出来的接口数据，赋值给新list
      this.list = res.data.items
      this.counts = +res.data.counts
      console.log(this.counts)
    },
    // 重置表单
    clear() {
      this.orderForm.id = null
      this.orderForm.senderName = ''
      this.orderForm.senderPhone = ''
      this.orderForm.receiverName = ''
      this.orderForm.receiverPhone = ''
      this.orderList()
    }

  }
}

</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.card{
  margin: 15px;
}
.alert {
  margin: 10px 0px;
}
 .btnRedcolor{
    background-color: #e15536;
    color: white;
  }
.pagination {
  margin-top: 40px;
}

// 下拉框
/deep/ .el-select {
  width: 100%;
}
</style>

<style lang="scss" scoped>
.order-list /deep/ .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}
</style>
